<template>
	<view class="page">
		<!-- 主内容区 -->
		<view class="content">

			<!-- 课程列表 -->
			<view class="course-list">
				<block>
					<view class="course-card">
						<view class="card-header">
							<view class="class-info">
								<!-- <text class="class-id">ID: {{classroom.id}}</text> -->
								<text class="class-name" :class="{'warning': classroom.un_consume_num >= 1}">
									{{classroom.class_name||''}}
								</text>
							</view>
							<!-- <u-tag :text="classroom.project_name" plain size="mini"></u-tag> -->
							<view class="" style="color: #3985ff ;font-size: 24rpx;">
								{{classroom.project_name||''}}
							</view>
						</view>

						<view class="card-body">
							<view class="course-info">
								<view class="">
									<text class="class-id">ID: {{classroom.id||''}}</text>
									<text class="class-id" v-if="classroom.train_enum_name">{{classroom.train_enum_name||''}}</text>
									<text class="class-id" v-if="classroom.course_name">{{classroom.course_name||''}}</text>
								</view>
								<!-- <view class="" style="display: flex;align-items: center;">
									<u-tag :text="classroom.train_enum_name" plain size="mini"></u-tag>
									<text class="course-name">{{classroom.course_name}}</text>
								</view> -->
								<view class="" style="color: #5ac725 ;font-size: 24rpx;"
									v-if="classroom.is_offer_a_course == 1">
									未开班
								</view>
								<view class="" style="color: #5ac725 ;font-size: 24rpx;"
									v-if="classroom.is_offer_a_course == 2">
									已开班
								</view>
								<view class="" style="color: #5ac725 ;font-size: 24rpx;"
									v-if="classroom.is_offer_a_course == 3">
									已结班
								</view>
								<!-- <u-tag text="未开班" plain size="mini" type="warning"
									v-if="classroom.is_offer_a_course == 1"></u-tag>
								<u-tag text="已开班" plain size="mini" type="success"
									v-if="classroom.is_offer_a_course == 2"></u-tag>
								<u-tag text="已结班" plain size="mini" type="error"
									v-if="classroom.is_offer_a_course == 3"></u-tag> -->
								<!-- <text class="course-date" v-if="classroom.startDate && classroom.endDate">
									{{classroom.startDate}} - {{classroom.endDate}}
								</text> -->
								<!-- <text class="course-date" v-if="classroom.startDate && classroom.endDate">
									{{classroom.startDate}} - {{classroom.endDate}}
								</text> -->
							</view>
							<view class="course-info">
								<view class="teacher-info">
									<view class="info-item">
										<uni-icons type="location" size="16"></uni-icons>
										<text>{{classroom.area_name||''}}</text>
									</view>
									<view class="info-item">
										<uni-icons type="person" size="16"></uni-icons>
										<text>{{classroom.scheduled_student||''}}/{{classroom.student_num||''}}人</text>
									</view>
									<view class="info-item">
										<!-- <image class="teacher-avatar" :src="teacherAvatar" mode="aspectFill" /> -->
										<uni-icons type="calendar" size="16"></uni-icons>
										<text>{{classroom.coach_name||''}}</text>
									</view>
								</view>
								<view class="tabitem" v-if="classroom.is_offer_a_course != 3">
									<view @click="onadd()"
										style="width: 67px;height: 26px;color: #ffffff;text-align: center;border-radius: 5px;line-height: 26px;background-color: #4c9dff;font-size: 22rpx;">
										编辑
									</view>
								</view>

							</view>
							<view class="course-info">
								<view class="hours-info">
									<view class="info-item">
										<text>已排: {{classroom.scheduled_hour || 0}}</text>
									</view>
									<view class="info-item">
										<!-- <text>剩余: </text> -->
										<text :class="{'warning': (classroom.less_scheduled_hour <3) }">
											剩余: {{(classroom.less_scheduled_hour || 0)}}
										</text>
									</view>
									<view class="info-item">
										<text>已签: {{classroom.sign_num || 0}}</text>
									</view>
									<view class="info-item">
										<text :class="{'warning': classroom.un_consume_num >= 1}">
											未消: {{classroom.un_consume_num || 0}}
										</text>
									</view>
									<view class="info-item">
										<text :class="{'warning1': classroom.un_consume_num >= 1}">
											{{classroom.show_tag || ''}}
										</text>
									</view>
								</view>
								<view class="tabitem"
									v-if="classroom.is_offer_a_course == 1 && classroom.scheduled_student > 0">
									<view @click="addopen(2)"
										style="width: 67px;height: 26px;color: #ffffff;text-align: center;border-radius: 5px;line-height: 26px;background-color: #5ac725;font-size: 22rpx;">
										去开班
									</view>
								</view>
								<view class="tabitem" v-if="classroom.is_offer_a_course == 2">
									<view @click="addopen(3)"
										style="width: 67px;height: 26px;color: #ffffff;text-align: center;border-radius: 5px;line-height: 26px;background-color: #5ac725;font-size: 22rpx;">
										结班
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="tab-filter">
				<view class="tabs">
					<!-- <view class="tab-item" :class="{'active': selected_Tab == item.id}" @click="selectedTab(item,index)"
						v-for="(item,index) in weekList3" :key="index">
						<text>{{item.name}}</text>
					</view> -->
					<view class="tab-item" style="font-size: 26rpx;" :class="{'active': selected_Tab == 1}"
						@click="selectedTab(1,0)">
						<text>未消课表({{schedules.length}})</text>
					</view>
					<view class="tab-item" style="font-size: 26rpx;" :class="{'active': selected_Tab == 2}"
						@click="selectedTab(2,1)">
						<text>学员列表({{students.length}})</text>
					</view>
					<view class="tab-item" style="font-size: 26rpx;" :class="{'active': selected_Tab == 3}"
						@click="selectedTab(3,2)">
						<text>已结课表({{scheduleslist.length}})</text>
					</view>
				</view>
			</view>
			<view v-if="showTabs">
				<!-- 选项卡内容 -->
				<view v-show="activeTab == 0">
					<view class="space-y-3">
						<view v-for="(schedule, index) in schedules" :key="index"
							class=" py-2 border-b align-start justify-space-between d-flex align-center">
							<view class="flex-row w-full mb-1" @click="onschedules(schedule, index)">
								<view class="text-sm" :class="{'active11': schedule.color == 1}">
									{{ schedule.course_date }}
								</view>
								<view class="text-xs text-gray-400" :class="{'active11': schedule.color == 1}"
									style="margin-top: 10rpx;">{{schedule.week_name}}-{{ schedule.time_period }}</view>
							</view>

							<view class="d-flex flex-column justify-space-between w-full "
								@click="onschedules(schedule, index)">
								<view class="d-flex flex-row align-center" style="margin-bottom: 10rpx;">
									<view class="" style="margin-right: 10rpx;" v-if="schedule.status_flag == 1">
										<u-tag :text="schedule.status_show" plain size="mini" type="warning"></u-tag>
									</view>
									<view class="" style="margin-right: 10rpx;"
										v-if="schedule.consume_status_flag == 1">
										<u-tag :text="schedule.consume_status_show" plain size="mini"
											type="error"></u-tag>
									</view>
								</view>
								<view class="text-xs text-gray-400" style="margin-right: 10rpx;text-align: right;">
									实际消课：{{schedule.act_deduct_num || 0}}
								</view>
							</view>

							<view class="d-flex flex-column justify-space-between w-full ">
								<!-- <view class="" style="margin-right: 10rpx;">
									<u-tag text="已签" plain size="mini" type="success"></u-tag>
								</view> -->
								<!-- <view class="d-flex flex-row align-center">
									<view class="" style="margin-right: 10rpx;" v-if="schedule.status_flag == 1">
										<u-tag :text="schedule.status_show" plain size="mini" type="warning"></u-tag>
									</view>
									<view class="" style="margin-right: 10rpx;"
										v-if="schedule.consume_status_flag == 1">
										<u-tag :text="schedule.consume_status_show" plain size="mini"
											type="error"></u-tag>
									</view>
								</view> -->
								<view class="text-xs text-gray-400"
									style="margin-right: 10rpx;text-align: right;margin-bottom: 10rpx;">
									{{ schedule.act_student_num || 0 }}/{{ schedule.should_student_num }}人
								</view>
								<view class="d-flex flex-row align-center">
									<view @click="onElimination(schedule, index)"
										style="width: 100rpx;height: 40rpx;font-size: 24rpx;background-color: #4786fe;color: #ffffff;border-radius: 10rpx;text-align: center;line-height: 36rpx;">
										去结课</view>
								</view>
							</view>
						</view>
						<view class="" style="width: 100%;height: 120rpx;"></view>
						<view class="d-flex flex-row justify-space-between justify-center align-center"
							style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 999;">
							<view @click="addlist()"
								style="width: 100%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
								添加课表
							</view>
						</view>
					</view>
				</view>
				<view v-show="activeTab == 1">
					<view class="space-y-3">
						<view v-for="(student, index) in students" :key="index"
							class="py-2 border-b d-flex align-start justify-space-between ">
							<view class="flex-align items-center space-x-3 mb-1">
								<image :src="student.head_img" class="w-8 h-8 rounded-full">
								</image>
								<view class="d-flex flex-column" style="margin-left: 20rpx;">
									<text class="font-medium">{{ student.name }}</text>
									<text class="text-xs text-gray-400"
										style="margin-top: 10rpx;">{{ student.mobile }}</text>
								</view>
							</view>
							<view class="flex-column align-start">
								<view class="text-gray-400 text-xs" style="text-align: right;">已上: <text
										class="text-blue-500">{{ student.num }}课时</text></view>
								<view class="text-gray-400 text-xs" style="text-align: right;margin-top: 10rpx;">剩余:
									<text class="text-green-500">{{ student.left_num }}课时</text>
								</view>
							</view>
						</view>
						<view class="" style="width: 100%;height: 120rpx;"></view>
						<view class="d-flex flex-row justify-space-between justify-center align-center"
							style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 999;">
							<view @click="addstudent"
								style="width: 100%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
								添加学员
							</view>
						</view>
					</view>
				</view>
				<view v-show="activeTab == 2">
					<view class="space-y-3">
						<!-- <view v-for="(schedule, index) in scheduleslist" :key="index"
							@click="onschedules(schedule, index)"
							class=" py-2 border-b align-start justify-space-between d-flex align-center">
							<view class="flex-row w-full mb-1">
								<view class="text-sm" :class="{'active11': schedule.color == 1}">
									{{ schedule.course_date }}
								</view>
								<view class="text-xs text-gray-400" :class="{'active11': schedule.color == 1}"
									style="margin-top: 10rpx;">{{ schedule.time_period }}</view>
							</view>
							<view class="d-flex flex-column justify-space-between w-full ">
								
								<view class="d-flex flex-row align-center">
									<view class="" style="margin-right: 10rpx;" v-if="schedule.status_flag == 1">
										<u-tag :text="schedule.status_show" plain size="mini" type="warning"></u-tag>
									</view>
									<view class="" style="margin-right: 10rpx;"
										v-if="schedule.consume_status_flag == 1">
										<u-tag :text="schedule.consume_status_show" plain size="mini"
											type="error"></u-tag>
									</view>
								</view>
								<view class="text-xs text-gray-400"
									style="margin-right: 10rpx;text-align: right;margin-top: 10rpx;">
									{{ schedule.act_student_num || 0 }}/{{ schedule.should_student_num }}人
								</view>
							</view>
						</view> -->
						<view v-for="(schedule, index) in scheduleslist" :key="index"
							class=" py-2 border-b align-start justify-space-between d-flex align-center">
							<view class="flex-row w-full mb-1" @click="onschedules(schedule, index)">
								<view class="text-sm" :class="{'active11': schedule.color == 1}">
									{{ schedule.course_date }}
								</view>
								<view class="text-xs text-gray-400" :class="{'active11': schedule.color == 1}"
									style="margin-top: 10rpx;">{{schedule.week_name}}-{{ schedule.time_period }}</view>
							</view>
						
							<view class="d-flex flex-column justify-space-between w-full "
								@click="onschedules(schedule, index)">
								
								<view class="text-xs text-gray-400" style="margin-right: 10rpx;text-align: right;">
									实际消课：{{schedule.act_deduct_num || 0}}
								</view>
							</view>
						
							<view class="d-flex flex-column justify-space-between w-full ">
								<view class="d-flex flex-row align-center" style="margin-bottom: 10rpx;">
									<view class="" style="margin-right: 10rpx;" v-if="schedule.status_flag == 1">
										<u-tag :text="schedule.status_show" plain size="mini" type="warning"></u-tag>
									</view>
									<view class="" style="margin-right: 10rpx;"
										v-if="schedule.consume_status_flag == 1">
										<u-tag :text="schedule.consume_status_show" plain size="mini"
											type="error"></u-tag>
									</view>
								</view>
								<view class="text-xs text-gray-400"
									style="margin-right: 10rpx;text-align: right;margin-bottom: 10rpx;">
									{{ schedule.act_student_num || 0 }}/{{ schedule.should_student_num }}人
								</view>
								<!-- <view class="d-flex flex-row align-center">
									<view @click="onElimination(schedule, index)"
										style="width: 100rpx;height: 40rpx;font-size: 24rpx;background-color: #4786fe;color: #ffffff;border-radius: 10rpx;text-align: center;line-height: 36rpx;">
										去结课</view>
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup @touchmove.stop :show="enrollDetailPopup" @close="closehomeInfo" closeOnClickOverlay mode="center"
			:safeAreaInsetBottom="false" round="15" :safeAreaInsetTop="true">
			<view class="tab-filter">
				<view class="tabs">
					<view class="tab-item" style="font-size: 26rpx;" :class="{'active': selected_Tab22 == 1}"
						@click="selectedTab22(1,0)">
						<text>待消课({{studentlist.length}})</text>
					</view>
					<view class="tab-item" style="font-size: 26rpx;" :class="{'active': selected_Tab22 == 2}"
						@click="selectedTab22(2,1)">
						<text>已消课({{completeList.length}})</text>
					</view>
					<view class="tab-item" style="font-size: 26rpx;" :class="{'active': selected_Tab22 == 3}"
						@click="selectedTab22(3,2)">
						<text>请假({{leaveList.length}})</text>
					</view>
				</view>
			</view>
			<scroll-view class="storepopup" style="height: 60vh;padding: 20rpx 20rpx;width: 660rpx;" scroll-y>
				<van-checkbox-group :value="selectList" @change.native="change">
					<view class="item" v-for="(item,index) in studentlist" :key="index" v-if="selected_Tab22 == 1"
						style="position: relative;display: flex; flex-direction: row;   justify-content:  space-between; align-items: center; ">
						<view class="" style="width: 100%;">
							<!-- @change="onChange" -->
							<van-checkbox checked-color="#635df7" icon-size="40rpx" :name="index" @change="onChange">
								<view class="" style="display: flex;flex-direction: column;">
									<view class="flex-space-between " style="padding: 30rpx 0 0 0;"
										@click='toggle(item)'>
										<view class="flex-align item-detail">
											<view class="avatar">
												<!-- <van-image round width="84rpx" height="84rpx" :src="item.head_img" @tap.stop="viewImg($event,item)"/> -->
												<image style="width: 84rpx;height: 84rpx;border-radius: 50% 50%;"
													:src="item.head_img" mode="" @click='head_toggle(item)'></image>
											</view>
											<view style="font-size: 22rpx;">
												<view class="name">{{item.name}}
													<text
														style="font-size: 22rpx;margin-left: 10rpx;">({{item.sex}})</text>
												</view>
												<view class="name">
													<text style="font-size: 22rpx;">{{item.mobile}}</text>
												</view>
											</view>
											<view style="display: flex;flex-direction: column;font-size: 22rpx;">
												<view class="flex-align" style="margin-left: 20rpx;width: 200rpx;">
													<text>余课：{{item.less_hour_num}}</text>
												</view>
												<view class="flex-align" style="margin-left: 20rpx;width: 200rpx;">
													<text>课消：</text> <input type="number" v-model="item.deduct_num"
														style="border: 1rpx #f5f5f5 solid;width: 100rpx;" />
												</view>
											</view>
										</view>
										<view @click="onleave(item,index)"
											style="width: 80rpx;height: 40rpx;font-size: 24rpx;background-color: #4786fe;color: #ffffff;border-radius: 5rpx;text-align: center;">
											请假</view>

									</view>
									<view class="">
										<view class="flex-align"
											style="margin-left: 20rpx;width: 300rpx;margin-top: 10rpx;font-size: 22rpx;">
											<text>备注：</text><input type="number" v-model="item.remark"
												style="border: 1rpx #f5f5f5 solid;width: 200rpx;" />
										</view>
									</view>
								</view>
							</van-checkbox>
						</view>
					</view>
					<view class="item" v-for="(item,index) in completeList" :key="index" v-if="selected_Tab22 == 2"
						style="position: relative;display: flex; flex-direction: row;   justify-content:  space-between; align-items: center; ">
						<view class="" style="width: 100%;">
							<!-- @change="onChange" -->
							<van-checkbox checked-color="#635df7" icon-size="40rpx" :name="index" @change="onChange">
								<view class="" style="display: flex;flex-direction: column;">
									<view class="flex-space-between " style="padding: 30rpx 0 0 0;"
										@click='toggle(item)'>
										<view class="flex-align item-detail">
											<view class="avatar">
												<!-- <van-image round width="84rpx" height="84rpx" :src="item.head_img" @tap.stop="viewImg($event,item)"/> -->
												<image style="width: 84rpx;height: 84rpx;border-radius: 50% 50%;"
													:src="item.head_img" mode="" @click='head_toggle(item)'></image>
											</view>
											<view style="font-size: 22rpx;margin-left: 10rpx;">
												<view class="name">{{item.name}}
													<text
														style="font-size: 22rpx;margin-left: 10rpx;">({{item.sex}})</text>
												</view>
												<view class="name">
													<text style="font-size: 22rpx;">{{item.mobile}}</text>
												</view>
											</view>
											<view style="display: flex;flex-direction: column;font-size: 22rpx;">
												<view class="flex-align" style="margin-left: 20rpx;width: 200rpx;">
													<text>余课：{{item.less_hour_num}}</text>
												</view>
												<view class="flex-align" style="margin-left: 20rpx;width: 200rpx;">
													<text>课消：{{item.deduct_num}}</text>
												</view>
											</view>
										</view>

									</view>
									<view class="">
										<view class="flex-align"
											style="margin-left: 20rpx;width: 300rpx;margin-top: 10rpx;font-size: 22rpx;">
											<text>备注：</text><input type="text" v-model="item.remark"
												style="border: 1rpx #f5f5f5 solid;width: 200rpx;" />
										</view>
									</view>
								</view>
							</van-checkbox>
						</view>
					</view>
					<view class="item" v-for="(item,index) in leaveList" :key="index" v-if="selected_Tab22 == 3"
						style="position: relative;display: flex; flex-direction: row;   justify-content:  space-between; align-items: center; ">
						<view class="" style="width: 100%;">
							<!-- @change="onChange" -->
							<van-checkbox checked-color="#635df7" icon-size="40rpx" :name="index" @change="onChange">
								<view class="" style="display: flex;flex-direction: column;">
									<view class="flex-space-between " style="padding: 30rpx 0 0 0;"
										@click='toggle(item)'>
										<view class="flex-align item-detail">
											<view class="avatar">
												<!-- <van-image round width="84rpx" height="84rpx" :src="item.head_img" @tap.stop="viewImg($event,item)"/> -->
												<image style="width: 84rpx;height: 84rpx;border-radius: 50% 50%;"
													:src="item.head_img" mode="" @click='head_toggle(item)'></image>
											</view>
											<view style="font-size: 22rpx;">
												<view class="name">{{item.name}}
													<text
														style="font-size: 22rpx;margin-left: 10rpx;">({{item.sex}})</text>
												</view>
												<view class="name">
													<text style="font-size: 22rpx;">{{item.mobile}}</text>
												</view>
											</view>
											<view style="display: flex;flex-direction: column;font-size: 22rpx;">
												<view class="flex-align" style="margin-left: 20rpx;width: 200rpx;">
													<text>余课：{{item.less_hour_num}}</text>
												</view>
											</view>
										</view>
										<view @click="revert_leave(item)"
											style="width: 80rpx;height: 40rpx;font-size: 24rpx;background-color: #4786fe;color: #ffffff;border-radius: 5rpx;text-align: center;">
											撤销</view>

									</view>
									<view class="">
										<view class="flex-align"
											style="margin-left: 20rpx;width: 300rpx;margin-top: 10rpx;font-size: 22rpx;">
											<text>备注：</text><input type="number" v-model="item.remark"
												style="border: 1rpx #f5f5f5 solid;width: 200rpx;" />
										</view>
									</view>
								</view>
							</van-checkbox>
						</view>
					</view>
				</van-checkbox-group>
			</scroll-view>
			<view class="enroll-detail-footer">
				<view class="footer flex-space-between" style="padding: 20rpx;">
					<view class="" v-if="selected_Tab22 == 1">
						<van-checkbox :value="isAllSelect" checked-color="#635df7" icon-size="40rpx"
							@change.native="allChange1">
							<view class="flex-space-between">
								<view class="label">全选</view>
							</view>
						</van-checkbox>
					</view>
					<view class="" v-if="selected_Tab22 == 2">
						<van-checkbox :value="isAllSelect" checked-color="#635df7" icon-size="40rpx"
							@change.native="allChange2">
							<view class="flex-space-between">
								<view class="label">全选</view>
							</view>
						</van-checkbox>
					</view>
					<view class="" v-if="selected_Tab22 == 3">
						<van-checkbox :value="isAllSelect" checked-color="#635df7" icon-size="40rpx"
							@change.native="allChange3">
							<view class="flex-space-between">
								<view class="label">全选</view>
							</view>
						</van-checkbox>
					</view>
					<view class="" @click.stop="handAskLeave(2)" v-if="selected_Tab22 == 1">
						<button type="default"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #4786fe;color: #ffffff;">提交消课</button>
					</view>
					<view class="" @click.stop="revertSub(2)" v-if="selected_Tab22 == 2">
						<button type="default"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #4786fe;color: #ffffff;">提交撤销</button>
					</view>
					<view class="" @click.stop="revertSub(3)" v-if="selected_Tab22 == 3">
						<button type="default"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #4786fe;color: #ffffff;">提交撤销</button>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup @touchmove.stop :show="EliminatioPopup" @close="closeEliminatio" closeOnClickOverlay mode="center"
			:safeAreaInsetBottom="false" round="15">
			<view class="tab-filter" style="font-size: 30rpx;text-align: center;">
				<text>结课详情</text>
			</view>
			<scroll-view class="storepopup" style="height: 20vh;padding: 20rpx 20rpx;width: 660rpx;" scroll-y>
				<view class=" py-2 align-start justify-space-between d-flex align-center">
					<view class="flex-row w-full mb-1">
						<view class="text-sm" :class="{'active11': schedulelist.color == 1}">
							{{ schedulelist.course_date }}
						</view>
						<view class="text-xs text-gray-400" :class="{'active11': schedulelist.color == 1}"
							style="margin-top: 10rpx;">{{schedulelist.week_name}}-{{ schedulelist.time_period }}</view>
					</view>

					<view class="d-flex flex-column justify-space-between w-full">
						<view class="d-flex flex-row align-center" style="margin-bottom: 10rpx;">
							<view class="" style="margin-right: 10rpx;" v-if="schedulelist.status_flag == 1">
								<u-tag :text="schedulelist.status_show" plain size="mini" type="warning"></u-tag>
							</view>
							<view class="" style="margin-right: 10rpx;" v-if="schedulelist.consume_status_flag == 1">
								<u-tag :text="schedulelist.consume_status_show" plain size="mini" type="error"></u-tag>
							</view>
						</view>
						<view class="text-xs text-gray-400" style="margin-right: 10rpx;text-align: right;">
							实际消课：{{schedulelist.act_deduct_num || 0}}
						</view>
					</view>

					<view class="d-flex flex-column justify-space-between w-full ">
						<view class="text-xs text-gray-400"
							style="margin-right: 10rpx;text-align: right;margin-bottom: 10rpx;">
							{{ schedulelist.act_student_num || 0 }}/{{ schedulelist.should_student_num }}人
						</view>
					</view>
				</view>
				<view class="" v-if="schedulelist.color == 1">
					<u-notice-bar :text="text2" bgColor="#f8fbff" color="#333333" @click="openNotice"
						icon="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c5607a289054f4440c72aa018357c87ab9341bbe.png">
					</u-notice-bar>

				</view>
				<view class="" v-else>
					<u-notice-bar :text="text1" bgColor="#f8fbff" color="#333333" @click="openNotice"
						icon="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/c5607a289054f4440c72aa018357c87ab9341bbe.png">
					</u-notice-bar>
				</view>
			</scroll-view>
			<view class="enroll-detail-footer">
				<view class="footer " style="padding: 20rpx;">

					<view class="" style="display: flex;flex-direction: row;">
						<button type="default" @click="offclasses"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #d0d0d0;color: #ffffff;">取消</button>
						<button type="default" @click="onclasses"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #4786fe;color: #ffffff;">提交结课</button>
					</view>

				</view>
			</view>
		</u-popup>
		<u-popup @touchmove.stop :show="dialogVisible" @close="dialogVisible = false" closeOnClickOverlay mode="center"
			:safeAreaInsetBottom="false" round="15">
			<scroll-view class="storepopup" style="height: 60vh;padding: 20rpx 20rpx;width: 660rpx;" scroll-y>
				<view class="enroll-detail-popup">
					<view class="enroll-detail-title">开班</view>
					<view class="enroll-detail-content">
						<u-alert type="warning" :closable="closable2" :title="title" v-if="classroom.is_offer_a_course == 1"
							:description="description"></u-alert>
						<view class="detail-item">
							<text class="detail-label">班级：</text>
							<view class=" d-flex flex-row" style="margin-left: 15rpx;">
								<text class="detail-value">{{classroom.class_name || '-' }}</text>
								<u-tag :text=" classroom.train_enum_name" plain size="mini"></u-tag>
							</view>
						</view>
						<view class="detail-item">
							<text class="detail-label">课程：</text>
							<view class="d-flex flex-row" style="margin-left: 15rpx;">
								<text class="detail-value">{{ classroom.course_name || '-' }}</text>
								<u-tag :text=" classroom.project_name" plain size="mini"></u-tag>
							</view>
						</view>
						<view class="detail-item">
							<text class="detail-label">学员：</text>
							<text style="margin-left: 15rpx;"
								class="detail-value">{{ classroom.scheduled_student || '-' }}/{{ classroom.student_num || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">教练：</text>
							<text class="detail-value"
								style="margin-left: 15rpx;">{{ classroom.coach_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">教练：</text>
							<text class="detail-value"
								style="margin-left: 15rpx;">{{ classroom.coach_name || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">已排：</text>
							<text class="detail-value"
								style="margin-left: 15rpx;">{{ classroom.scheduled_hour || '-' }}</text>
						</view>
						<view class="detail-item">
							<text class="detail-label">校区：</text>
							<text class="detail-value"
								style="margin-left: 15rpx;">{{ classroom.area_name || '-' }}</text>
						</view>
						<view class="detail-item" v-if="classroom.is_offer_a_course == 1">
							<text class="detail-label">选择日期：</text>
							<view style="margin-left: 15rpx;">
								<input type="text" placeholder="请选择开班日期" disabled v-model="datatime1" class="atinput"
									style="width: 400rpx;" @click="show1 = true" />
							</view>
						</view>
						<view class="detail-item" v-if="classroom.is_offer_a_course == 2">
							<text class="detail-label">选择日期：</text>
							<view style="margin-left: 15rpx;">
								<input type="text" placeholder="请选择结班日期" disabled v-model="datatime2" class="atinput"
									style="width: 400rpx;" @click="show2 = true" />
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="enroll-detail-footer">
				<view class="footer " style="padding: 20rpx;">

					<view class="" style="display: flex;flex-direction: row;">
						<button type="default" @click="dialogVisible = false"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #d0d0d0;color: #ffffff;">取消</button>
						<button type="default" @click="showConfirm1()" v-if="classroom.is_offer_a_course == 1"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #4786fe;color: #ffffff;">开班</button>
						<button type="default" @click="showConfirm2()" v-if="classroom.is_offer_a_course == 2"
							style="width: 170rpx;height: 70rpx;font-size: 26rpx;background-color: #4786fe;color: #ffffff;">结班</button>
					</view>

				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="show1" v-model="value1" mode="date" @confirm="timelist1" :minDate="-845628841"
			:maxDate="2856778555000" @cancel="show1 = false"></u-datetime-picker>
		<u-datetime-picker :show="show2" v-model="value2" mode="date" @confirm="timelist2" :minDate="-845628841"
			:maxDate="2856778555000" @cancel="show2 = false"></u-datetime-picker>
	</view>
</template>

<script>
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				enrollDetailPopup: false,
				Cardlist: [],
				activeTab: 0,
				schedules: [],
				studentlist: [],
				students: [],
				consumptionRecords: [{
						studentName: "张宇",
						date: "2024-01-15",
						time: "09:00 - 10:30",
						course: "健身基础训练",
						hours: 1
					},
					{
						studentName: "李华",
						date: "2024-01-17",
						time: "09:00 - 10:30",
						course: "健身基础训练",
						hours: 1
					}
				],
				showTabs: true,
				weekList3: [{
						id: 1,
						name: "未销课表"
					},
					{
						id: 2,
						name: "学员列表"
					},
					{
						id: 3,
						name: "已销课表"
					},
				],
				selected_Tab: 1,
				selected_Tab22: 1,
				classroom: {},
				listQuery: { //分页
					pageNo: 1,
					pageSize: 10,
				},
				totalPage: '', //几页
				venue_id: '',
				isAllSelect: false, //是否全选
				selectList: [],
				applicantlist: [],
				hour_id: "",
				course_date: '',
				completeList: [],
				leaveList: [],
				EliminatioPopup: false,
				schedulelist: [],
				text1: '日期时间未到',
				text2: '日期时间已到',
				scheduleslist: [],
				classroom: {},
				dialogVisible: false,
				mode: 'single', // 日历模式（默认日期选择）
				minDate: new Date('2025-01-01').getTime(), // 示例最小日期
				maxDate: new Date('2050-01-01').getTime(), // 示例最大日期
				show1: false,
				value1: Number(new Date()),
				datatime1: '',
				optype: '',
				show2: false,
				value2: Number(new Date()),
				datatime2: '',
				title: '开班提醒',
				description: '开班前请谨慎检查学员数量，已排课时以及主教练和助教，以免误操作！！！',
				closable: true,
				id:'',
				classrooms:{}
			};
		},
		onLoad(options) {
			const selectionArrs = JSON.parse(decodeURIComponent(options.selectionArr))
			this.classroom = selectionArrs
			this.classrooms = selectionArrs
			console.log(this.classroom)
			this.venue_id = options.venue_id
			this.id = options.id
		},
		onShow() {
			this.clsMangedetail()
			

		},
		methods: {
			timelist1(value) {
				console.log(value, 'value')
				this.show1 = false
				let date = new Date(value.value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				console.log(y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s)
				this.datatime1 = y + '-' + MM + '-' + d
				return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			timelist2(value) {
				console.log(value, 'value')
				this.show2 = false
				let date = new Date(value.value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				console.log(y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s)
				this.datatime2 = y + '-' + MM + '-' + d
				return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			onElimination(schedule, index) {
				this.schedulelist = schedule
				this.EliminatioPopup = true
			},
			onclasses() {
				let that = this
				uni.showModal({
					title: '是否确认结课！',
					content: '此操作不可逆！',
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: '#000000',
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							let params = {
								hour_id: that.schedulelist.id
							};
							console.log(params, 'params')
							train.confcomplete(params).then(res => {
								if (res.code == 1) {
									
									that.EliminatioPopup = false
									// that.time_hour()
									// that.trainstu()
									// that.studentslist()
									that.clsMangedetail()
								}
							})

						}
					}
				})
			},
			offclasses() {
				this.EliminatioPopup = false
			},
			closeEliminatio() {
				this.EliminatioPopup = false
			},
			async revert_leave(item, index) {
				let that = this
				uni.showModal({
					title: '是否确认撤销！',
					// content: '是否取消订单？',
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: '#000000',
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							let params = {
								id: item.id
							};
							console.log(params, 'params')
							train.revert_leave(params).then(res => {
								if (res.code == 1) {
									// that.time_hour()
									that.trainstu()
									// that.studentslist()
									that.clsMangedetail()
								}
							})
						}
					}
				})
			},
			async onleave(item, index) {
				let that = this
				uni.showModal({
					title: '是否确认请假！',
					// content: '是否取消订单？',
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: '#000000',
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							let params = {
								hour_id: that.hour_id,
								deduct_num: item.deduct_num,
								course_date: that.course_date,
								student_id: item.id
							};
							console.log(params, 'params')
							train.train_leave(params).then(res => {
								if (res.code == 1) {
									// that.time_hour()
									that.trainstu()
									// that.studentslist()
									that.clsMangedetail()
								}
							})
						}
					}
				})
			},
			async revert_sub() {
				let params = {
					hour_id: this.hour_id
				};
				let res = await train.trainstu(params);
				if (res.code == 1) {
					this.studentlist = res.data.list
					this.completeList = res.data.completeList
					this.leaveList = res.data.leaveList
				}
			},
			async clsMangedetail() {
				let params = {
					id: this.id
				};
				let res = await train.clsMangedetail(params);
				if (res.code == 1) {
					this.classroom = res.data
					this.time_hour()
					this.studentslist()
					this.record_list()
					this.time_hour11()
				}
			},
			async trainstu() {
				let params = {
					hour_id: this.hour_id
				};
				let res = await train.trainstu(params);
				if (res.code == 1) {
					this.studentlist = res.data.list
					this.completeList = res.data.completeList
					this.leaveList = res.data.leaveList
				}
			},
			async handAskLeave(state) {
				if (this.applicantlist != '') {
					let params = {
						hour_id: this.hour_id,
						course_date: this.course_date,
						stuInfos: this.applicantlist,
						stu_type: 1
					};
					console.log(params, 'params')
					let res = await train.trainsub(params);
					if (res.code == 1) {
						this.studentlist = []
						this.completeList = []
						this.leaveList = []
						this.selectList = []
						this.applicantlist = []
						// this.time_hour()
						this.trainstu()
						// this.studentslist()
						this.clsMangedetail()
					}
				} else {
					uni.showModal({
						title: '请选择学员',
						icon: 'none'
					})
				}

			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			onschedules(schedule, index) {
				console.log(schedule, 'schedule')
				// this.applicantlist = []
				// this.studentlist = []
				// this.selectList = []
				// this.hour_id = schedule.id
				// this.course_date = schedule.course_date
				// this.trainstu()
				// this.enrollDetailPopup = true
				uni.navigateTo({
					url: `./adddetail?selectionArr=${encodeURIComponent(JSON.stringify(schedule))}` +
						"&venue_id=" + this.venue_id+
						"&hour_id=" + schedule.id+
						"&course_date=" + schedule.course_date + "&classroom=" + encodeURIComponent(JSON.stringify(this.classrooms))+
						"&week_name=" + schedule.week_name+
						"&start_time=" + schedule.start_time+
						"&end_time=" + schedule.end_time+ "&id=" + this.classroom.id
				})

			},
			closehomeInfo() {
				this.enrollDetailPopup = false

			},
			// 撤销
			revertSub(type) {
				let that = this
				uni.showModal({
					title: '是否确认撤销！',
					// content: '是否取消订单？',
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: '#000000',
					cancelColor: '#999',
					success: function(res) {
						if (res.confirm) {
							if (that.applicantlist != '') {
								let params = {
									hour_id: that.hour_id,
									course_date: that.course_date,
									stuInfos: that.applicantlist,
									stu_type: type
								};
								console.log(params, 'params')
								train.revert_sub(params).then(res => {
									if (res.code == 1) {
										that.studentlist = []
										that.applicantlist = []
										that.completeList = []
										that.leaveList = []
										that.selectList = []
										// that.time_hour()
										that.trainstu()
										// that.studentslist()
										that.clsMangedetail()
									}
								})
							} else {
								uni.showModal({
									title: '请选择学员',
									icon: 'none'
								})
							}

						}
					}
				})

			},
			toggle(item) {
				console.log(item, 'item')
				if (this.selected_Tab22 == 1) {
					item.checked = !item.checked
					this.selectItemId = ''
					this.applicantlist = []
					this.studentlist.forEach((el, idx) => {
						if (el.checked) {
							this.applicantlist.push(el)
						}

					})
				} else if (this.selected_Tab22 == 2) {
					item.checked = !item.checked
					this.selectItemId = ''
					this.applicantlist = []
					this.completeList.forEach((el, idx) => {
						if (el.checked) {
							this.applicantlist.push(el)
						}

					})
				} else if (this.selected_Tab22 == 3) {
					item.checked = !item.checked
					this.selectItemId = ''
					this.applicantlist = []
					this.leaveList.forEach((el, idx) => {
						if (el.checked) {
							this.applicantlist.push(el)
						}

					})
				}

				// this.applicant = this.applicantlist.toString()
			},
			change(event) {
				console.log(event, 'event')

				if (this.selected_Tab22 == 1) {
					this.selectList = event.detail
					this.applicantlist = []
					this.selectList.forEach((ex, ix) => {
						this.studentlist.forEach((el, idx) => {
							if (ix == idx) {
								this.applicantlist.push(el)
							}

						})

					})
				} else if (this.selected_Tab22 == 2) {
					this.selectList = event.detail
					this.applicantlist = []
					this.selectList.forEach((ex, ix) => {
						this.completeList.forEach((el, idx) => {
							if (ix == idx) {
								this.applicantlist.push(el)
							}

						})

					})

				} else if (this.selected_Tab22 == 3) {
					this.selectList = event.detail
					this.applicantlist = []
					this.selectList.forEach((ex, ix) => {
						this.leaveList.forEach((el, idx) => {
							if (ix == idx) {
								this.applicantlist.push(el)
							}

						})

					})
				}
			},
			allChange1(event) {
				this.isAllSelect = event.detail
				if (this.isAllSelect) {
					this.selectList = []
					this.studentlist.forEach((item, index) => {
						this.selectList.push(index.toString())
					})
					this.selectList = this.selectList
					this.applicantlist = []
					this.studentlist.forEach((el, idx) => {
						this.applicantlist.push(el)
					})
				} else {
					this.selectList = []
					this.applicantlist = []
				}
			},
			allChange2(event) {
				this.isAllSelect = event.detail
				if (this.isAllSelect) {
					this.selectList = []
					this.completeList.forEach((item, index) => {
						this.selectList.push(index.toString())
					})
					this.selectList = this.selectList
					this.applicantlist = []
					this.completeList.forEach((el, idx) => {
						this.applicantlist.push(el)
					})
				} else {
					this.selectList = []
					this.applicantlist = []
				}
			},
			allChange3(event) {
				this.isAllSelect = event.detail
				if (this.isAllSelect) {
					this.selectList = []
					this.leaveList.forEach((item, index) => {
						this.selectList.push(index.toString())
					})
					this.selectList = this.selectList
					this.applicantlist = []
					this.leaveList.forEach((el, idx) => {
						this.applicantlist.push(el)
					})
				} else {
					this.selectList = []
					this.applicantlist = []
				}
			},

			goToOpenClass() {
				// 去开班的逻辑处理
				console.log('去开班操作');
			},
			goBack() {
				// 模拟返回上一页逻辑
				console.log('返回上一页');
			},
			selectedTab(item, index) {
				this.selected_Tab = item
				this.status = item
				this.activeTab = index
				this.listQuery.pageNo = 1
				if (this.activeTab == 0) {
					this.time_hour()
				} else if (this.activeTab == 1) {
					this.studentslist()
				} else if (this.activeTab == 2) {
					this.time_hour11()
				}
			},
			selectedTab22(item, index) {
				this.applicantlist = []
				this.studentlist = []
				this.selectList = []
				this.selected_Tab22 = item
				this.activeTab22 = index
				this.listQuery.pageNo = 1
				this.trainstu()
			},
			// 未销课表
			async time_hour() {
				let that = this;
				if (this.listQuery.pageNo == 1) that.schedules = [];
				let params = {
					venue_id: this.venue_id,
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
					date: '',
					course_date: '',
					class_id: this.classroom.id
				};
				let res = await train.time_hour(params);
				if (res.code == 1) {
					that.schedules = that.schedules.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
				}
			},
			async time_hour11() {
				let that = this;
				if (this.listQuery.pageNo == 1) that.scheduleslist = [];
				let params = {
					venue_id: this.venue_id,
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
					date: '',
					course_date: '',
					class_id: this.classroom.id,
					consume_status: 2
				};
				let res = await train.time_hour(params);
				if (res.code == 1) {
					that.scheduleslist = that.scheduleslist.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
				}
			},
			onReachBottom() {
				if (this.totalPage <= this.listQuery.pageNo) {
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				if (this.activeTab == 0) {
					this.time_hour()
				} else if (this.activeTab == 1) {
					this.studentslist()
				} else if (this.activeTab == 2) {
					this.record_list()
				}
			},
			// 学员列表
			async studentslist() {
				let params = {
					class_id: this.classroom.id
				};
				let res = await train.students(params);
				if (res.code == 1) {
					this.students = res.data
				}
			},
			async record_list() {
				let that = this;
				if (this.listQuery.pageNo == 1) that.consumptionRecords = [];
				let params = {
					class_id: this.classroom.id,
					page: this.listQuery.pageNo,
					pageSize: this.listQuery.pageSize,
				};
				let res = await train.record_list(params);
				if (res.code == 1) {
					// this.consumptionRecords = res.data.data
					that.consumptionRecords = that.consumptionRecords.concat(res.data.data); //将数据拼接在一起
					that.totalPage = res.data.last_page
				}
			},
			addlist() {
				uni.navigateTo({
					url: `../coach_schedule/detail?selectionArr=${encodeURIComponent(JSON.stringify(this.classrooms))}` +
						"&venue_id=" + this.venue_id
				})
			},
			addstudent() {
				uni.navigateTo({
					url: `./studentlist?selectionArr=${encodeURIComponent(JSON.stringify(this.classrooms))}` +
						"&venue_id=" + this.venue_id
				})
			},
			onadd() {
				uni.navigateTo({
					url: `./create?selectionArr=${encodeURIComponent(JSON.stringify(this.classrooms))}` +
						"&status=" + 2 + "&venue_id=" + this.venue_id
				})
			},


			showConfirm1() {
				if (this.datatime1 == '') {
					uni.$u.toast('请选择开班日期')
					return;
				}
			
				uni.showModal({
					title:'确定开班',
					content: '',
					confirmText: '确定',
					cancelText: '取消',
					success: async (res) => {
						if (res.confirm) {
							let params = {
								id: this.classroom.id,
								open_date: this.datatime1,
								op: this.optype
							};
							console.log(params, 'params')
							train.cls_mangeop(params).then(res => {
								if (res.code == 1) {
									uni.$u.toast(res.info)
									this.dialogVisible = false;
									setTimeout(() => {
										uni.navigateBack({
											delta: 1 // 返回上一页面，如果页面栈中只有一个页面则该方法不会生效
										});
									}, 1000)
								} else {
									uni.$u.toast(res.info)
								}
							})

						}
					}
				});
			},
			showConfirm2() {
				if (this.datatime2=='') {
					uni.$u.toast('请选择结班日期')
					return;
				}
				uni.showModal({
					title: '确定结班',
					content: '',
					confirmText: '确定',
					cancelText: '取消',
					success: async (res) => {
						if (res.confirm) {
							let params = {
								id: this.classroom.id,
								end_date: this.datatime2,
								op: this.optype
							};
							console.log(params, 'params')
							train.cls_mangeop(params).then(res => {
								if (res.code == 1) {
									uni.$u.toast(res.info)
									this.dialogVisible = false;
									setTimeout(() => {
										uni.navigateBack({
											delta: 1 // 返回上一页面，如果页面栈中只有一个页面则该方法不会生效
										});
									}, 1000)
								} else {
									uni.$u.toast(res.info)
								}
							})
			
						}
					}
				});
			},
			addopen(type) {
				this.optype = type
				this.dialogVisible = true;
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}

	.page {
		background-color: #ffffff;
		height: 100vh;
	}

	.box_11 {
		width: 100%;
		height: 110rpx;
		display: flex;
		flex-direction: row;
		background: #ffffff;
		padding: 0 20rpx;

		// .image-wrapper_7 {
		// 	width: 541rpx;
		// 	height: 60rpx;
		// 	flex-direction: row;
		// 	display: flex;
		// 	margin-top: 15rpx;
		// }
		.image-wrapper_7 {
			position: absolute;
			left: 30rpx;
			top: 30rpx;
			width: 600rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
		}

		.label_list {
			display: flex;
			flex-direction: column;
			position: absolute;
			justify-content: center;
			/* 相对父元素水平居中 */
			align-items: center;
			/*  子元素相对父元素垂直居中 */
			right: 90rpx;
			width: 80rpx;
			top: 27rpx;

			.label_7 {
				width: 36rpx;
				height: 36rpx;
			}

			.label_77 {
				width: 60rpx;
				height: 36rpx;
				color: #333333;
				font-size: 26rpx;
				text-align: center;
			}
		}

		.label8_list {
			display: flex;
			flex-direction: column;
			position: absolute;
			justify-content: center;
			/* 相对父元素水平居中 */
			align-items: center;
			/*  子元素相对父元素垂直居中 */
			right: 20rpx;
			width: 80rpx;
			top: 27rpx;

			.label_8 {
				width: 36rpx;
				height: 36rpx;
			}

			.label_88 {
				width: 60rpx;
				height: 36rpx;
				color: #333333;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 100;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.title {
		font-size: 32rpx;
		font-weight: 500;
	}

	.content {
		// padding-top: 20rpx;
		padding-bottom: 32rpx;
	}

	.tab-filter {
		background-color: #ffffff;
		padding: 32rpx 32rpx 20rpx 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-radius: 30rpx;
	}

	.tabs {
		display: flex;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.tab-item {
		padding: 16rpx 20rpx;
		margin-right: 20rpx;
		position: relative;
	}

	.tabitem {
		position: relative;
	}

	.tab-item.active {
		color: #2979ff;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -2rpx;
		left: 0;
		right: 0;
		height: 4rpx;
		background-color: #2979ff;
	}

	.filter {
		display: flex;
		justify-content: flex-end;
		margin-top: 16rpx;
	}

	.course-list {
		padding: 20rpx 20rpx 0 20rpx;
	}

	.course-card {
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx 0 0 0;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.class-name {
		font-size: 32rpx;
		font-weight: 500;
	}

	.class-name.warning {
		color: #ff4d4f;
	}

	.class-name.warning1 {
		color: #3083ff;
	}

	.class-id {
		font-size: 24rpx;
		color: #999999;
		margin-right: 16rpx;
		background-color: #f5f5f5;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}

	.class-desc {
		font-size: 24rpx;
		color: #999999;
		margin-top: 8rpx;
		display: block;
	}

	.card-body {
		margin-top: 24rpx;
	}

	.course-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.course-name {
		font-size: 28rpx;
		color: #666666;
		margin-left: 10rpx;
	}

	.course-date {
		font-size: 24rpx;
		color: #999999;
	}

	.teacher-info,
	.hours-info {
		display: flex;
		gap: 32rpx;
		margin-top: 16rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #666666;
	}

	.teacher-avatar {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		margin-right: 8rpx;
	}

	.warning {
		color: #ff4d4f;
	}

	.warning1 {
		color: #3083ff;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 64rpx 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.empty-image {
		width: 240rpx;
		height: 240rpx;
	}

	.empty-text {
		color: #999999;
		font-size: 28rpx;
		margin: 32rpx 0;
	}

	.filter-content {
		background-color: #ffffff;
		padding: 20rpx 10rpx 20rpx 20rpx;
		border-radius: 32rpx 32rpx 0 0;
	}

	.filter-item {
		margin-bottom: 24rpx;
	}

	.item {
		// padding: 29rpx 30rpx 30rpx;
		padding: 0 0 20rpx 20rpx;

		.atinput {
			// border: #EBECEE 1rpx solid;
			color: #333333;
			font-size: 14px;
			height: 60rpx;
			width: 600rpx;
			padding-left: 20rpx;
		}

		.item-title {
			color: rgb(153, 153, 153);
			font-size: 28rpx;
			font-weight: 500;
			margin-bottom: 20rpx;
		}

		.value {
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 500;
		}

		.time-cell {
			color: rgb(51, 51, 51);
			font-size: 28rpx;
			font-weight: 500;
			justify-content: flex-start;

			.time {
				width: 49%;

				&:last-of-type {
					margin-left: 20rpx;
				}
			}
		}

		.week-list {
			flex-direction: row;
			width: 55vw;
			font-size: 24rpx;
			flex-wrap: wrap;
			display: flex;

			.week-item {
				padding: 15rpx 0;
				background-color: rgb(243, 243, 243);
				border-radius: 5rpx;
				text-align: center;
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				font-weight: 500;
				border: solid 2rpx transparent;
				box-sizing: border-box;
				padding: 6rpx 12rpx;
				margin-top: 20rpx;
				margin-right: 20rpx;
			}

			.active {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}

			.active1 {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}

			.active2 {
				color: rgba(255, 98, 0, 1);
				background-color: rgba(255, 65, 5, 0.1);
				// border: solid 2rpx rgb(99, 93, 247);
				position: relative;
			}

			.check {
				color: rgb(51, 51, 51);
				font-size: 24rpx;
				position: absolute;
				bottom: 10rpx;
				right: 0;
			}
		}
	}

	.filter-label {
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 16rpx;
		display: block;
	}

	.view-type {
		display: flex;
		gap: 16rpx;
	}

	.detail-content {
		background-color: #ffffff;
		border-radius: 32rpx 32rpx 0 0;
		padding: 32rpx;
		max-height: 80vh;
	}

	.detail-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.detail-title {
		font-size: 32rpx;
		font-weight: 500;
	}

	.tab-content {
		margin-top: 32rpx;
	}

	.schedule-item,
	.student-item,
	.record-item {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 0;
		border-bottom: 2rpx solid #f0f0f0;
	}

	.schedule-time,
	.student-info,
	.record-info {
		display: flex;
		flex-direction: column;
	}

	.date {
		font-size: 28rpx;
	}

	.time {
		font-size: 24rpx;
		color: #999999;
		margin-top: 8rpx;
	}

	.schedule-status {
		display: flex;
		align-items: center;
		gap: 16rpx;
	}

	.attendees {
		font-size: 24rpx;
		color: #999999;
	}

	.student-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}

	.student-detail,
	.record-detail {
		margin-left: 16rpx;
	}

	.student-name {
		font-size: 28rpx;
		font-weight: 500;
	}

	.student-phone,
	.record-time {
		font-size: 24rpx;
		color: #999999;
		margin-top: 8rpx;
	}

	.student-hours {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		font-size: 24rpx;
		color: #666666;
		gap: 8rpx;
	}

	.record-hours {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.record-hours .course-name {
		font-size: 28rpx;
		font-weight: 500;
	}

	.record-hours .hours {
		font-size: 24rpx;
		color: #2979ff;
		margin-top: 8rpx;
	}

	.record-summary {
		text-align: right;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #666666;
	}

	.storepopup {
		.enroll-detail-popup {
			// width: 600rpx;
			// background: #ffffff;
			// border-radius: 16rpx;
			overflow: hidden;
		}

		.enroll-detail-title {
			font-size: 16px;
			color: #333333;
			font-weight: 500;
			text-align: left;
			padding: 30rpx;
			border-bottom: 1px solid #f0f0f0;
			display: flex;
			flex-direction: row;
		}

		.enroll-detail-content {
			padding: 30rpx 30rpx 30rpx 30rpx;
			max-height: 800rpx;
			overflow-y: auto;
		}

		.detail-item {
			display: flex;
			align-items: flex-start;
			margin-bottom: 24rpx;
			align-items: center;
		}

		.detail-item:last-child {
			margin-bottom: 0;
		}

		.detail-label {
			width: 140rpx;
			flex-shrink: 0;
			color: #999999;
			font-size: 14px;
			text-align: right;
		}

		.detail-value {
			flex: 1;
			color: #333333;
			font-size: 14px;
		}

		.remark-item {
			align-items: flex-start;
		}

		.remark-item .detail-value {
			word-break: break-all;
		}

		.enroll-detail-footer {
			padding: 20rpx 30rpx;
			border-top: 1px solid #f0f0f0;
		}

		.close-btn {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #007AFF;
			color: #ffffff;
			font-size: 16px;
			border-radius: 8rpx;
			border: none;
		}
	}

	.min-h-screen {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: #f3f4f6;
	}

	.space-y-4>*+* {
		margin-top: 32rpx;
	}

	.bg-white {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
	}

	.text-base {
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.font-medium {
		font-weight: 500;
	}

	.text-gray-400 {
		color: #9ca3af;
	}

	.text-gray-600 {
		color: #4b5563;
	}

	.text-xs {
		font-size: 24rpx;
		line-height: 32rpx;
		// margin-top: 10rpx;
	}

	.active11 {
		color: #ff0000;
	}

	.mt-1 {
		margin-top: 8rpx;
	}

	.mt-2 {
		margin-top: 16rpx;
	}

	.mt-3 {
		margin-top: 24rpx;
	}

	.ml-1 {
		margin-left: 8rpx;
	}

	.ml-2 {
		margin-left: 16rpx;
	}

	.ml-3 {
		margin-left: 24rpx;
	}

	.space-x-2>*+* {
		margin-left: 16rpx;
	}

	.space-x-4>*+* {
		margin-left: 32rpx;
	}

	.w-6 {
		width: 48rpx;
	}

	.h-6 {
		height: 48rpx;
	}

	.w-8 {
		width: 64rpx;
	}

	.h-8 {
		height: 64rpx;
	}

	.rounded-full {
		border-radius: 9999rpx;
	}

	.border-b {
		border-bottom: 1rpx solid #e5e7eb;
	}

	.py-2 {
		padding: 16rpx 24rpx 16rpx 24rpx;
	}

	.text-right {
		text-align: right;
	}

	.text-blue-500 {
		color: #3b82f6;
	}

	.text-green-500 {
		color: #22c55e;
	}

	.text-red-500 {
		color: #ef4
	}

	.dialog {

		.dialog-title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 20px;
		}

		.form-row {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 15px;
		}

		.form-col {
			width: 50%;
			padding: 0 5px;
			box-sizing: border-box;
		}

		.form-label {
			font-weight: bold;
			margin-bottom: 5px;
		}

		.tag {
			background-color: #f0f0f0;
			padding: 3px 8px;
			border-radius: 4px;
			margin-left: 5px;
		}

		.picker {
			border: 1px solid #ccc;
			padding: 10px;
			border-radius: 4px;
			background-color: #fff;
		}

		.dialog-footer {
			display: flex;
			justify-content: flex-end;
			margin-top: 20px;
		}

		button {
			padding: 10px 20px;
			margin-left: 10px;
			border-radius: 4px;
			border: none;
			cursor: pointer;
		}

		button:first-child {
			background-color: #ccc;
		}

		button:last-child {
			background-color: #f56c6c;
			color: #fff;
		}
	}
</style>